<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>动态显示系统时间</title>
	<style type="text/css">
		body {
			width: 913px;
			margin: 0px auto;
		}

		.main {
			font-family: "黑体";
			font-size: 25px;
			color: #CC0000;
		}

		.clock {
			font-size: 50px;
			color: #CC0000;
			border-style: none
		}
	</style>
	<script type="text/javascript">
		function disptime() {
				var myDate = new Date(); //定义日期与时间变量
				var hour = myDate.getHours();
				var minutes = myDate.getMinutes();
				var seconds = myDate.getSeconds();
				if(hour < 10)
					hour = "0" + hour;
				if(minutes < 10)
					minutes = "0" + minutes;
				if(seconds < 10)
					seconds = "0" + seconds;
				document.getElementById("time").value = hour + ":" + minutes + ":" + seconds; //给id为time的标签赋值
				setTimeout("disptime()", 1000); //设置定时函数，1秒执行一次disptime函数
			}
			window.onload = disptime; //页面加载时调用disptime函数

	</script>
</head>

<body onload="disptime()">
	<div class="top">
		<img src="images/banner.png" alt="banner" />
	</div>
	<div class="main">
		当前系统时间：<input class="clock" type="text" id="time" />
	</div>
</body>

</html>